<template>
	<view class="content">
		<Loading :show="loading || subscribeLoading"></Loading>
		<view v-show="!loading">
			<view class="content">
				<view class="content-top-all">
					<view class="content-top" :style="{'right':see == 'VR' ?  '0' :  '100%'}">
						<view class="VR-image"  @click="skip">

							<!-- <u-image width="100%" mode="widthFix" :src="contentMsg.images" class="VR-u-image"></u-image> -->
							<image :src="imgUrl(contentMsg.cover_image)" style="width: 100%;" mode="widthFix" class="VR-u-image"></image>
						</view>
						<view style="flex: 1;height: 100%;">
							<u-swiper :list="contentMsg.many_image" :autoplay="false" :numberBottom="20" :numberRight="20" unit="px" mode="number"
							 indicator-pos="bottomRight" :borderRadius="0" :height="swiperHeight" :circular="false" @click="swiperIndex"></u-swiper>
						</view>
					</view>
				</view>
				<view class="change-button">
					<view :class="['change-button-part',see == 'VR' ?'change-button-part-sel':'']" @click=" changeSee('VR')  ">
						VR
					</view>

					<view :class="['change-button-part',see == 'swiper' ? 'change-button-part-sel':'']" @click="changeSee('swiper')">
						图片
					</view>

				</view>
			</view>

			<view class="content-title padding-common">
				<text class="font">{{contentMsg.spaceNum}}㎡</text> <text class="dot">·</text> <text class="font">{{contentMsg.level_des}}</text><text
				 class="dot">·</text><text class="font">{{contentMsg.building_title}}</text>
			</view>

			<view class="content-tag">
				<view class="sales-tag font" v-for="(item,index) in contentMsg.tagList" :key="index">
					<u-tag :text="item" :type=" tagType[tagNum(index)]" border-color="#FFFFFF" size="mini" />
				</view>
			</view>

			<view class="content-head padding-common">
				房源负责人 : {{contentMsg.admin_realName?contentMsg.admin_realName:contentMsg.admin_nickName}}
			</view>

			<view class="content-roughly padding-common">

				<view class="content-roughly-content">
					<view class="content-roughly-part">
						<view><text class="left">{{contentMsg.spaceNum}}</text><text class="right">㎡</text></view>
						<view class="content-roughly-bottom">约{{contentMsg.station}}个工位</view>
					</view>



					<view class="content-roughly-part">
						<view><text class="left">￥{{parseFloat(Number(contentMsg.meters_money))}}</text><text class="right" style="font-size: 18rpx;">元/㎡/月</text></view>
						<view class="content-roughly-bottom">总价￥ {{parseFloat(Number(contentMsg.total_price))}} 万元/月 </view>
					</view>
					<view class="content-roughly-part">
						<view><text class="left">{{contentMsg.decorate}}</text></view>
						<view class="content-roughly-bottom">装修 </view>
					</view>
				</view>


				<view class="divider-common divider"></view>
			</view>

			<view class="positioning padding-common">

				<view class="positioning-left">
					<view style="margin-right: 5rpx;">
						<u-icon name="map-fill" color="#666666"></u-icon>
					</view>
					<text>{{contentMsg.street_name}} - {{contentMsg.community_name}} {{contentMsg.building_address}} </text>

				</view>
				<u-image width="120rpx" mode="widthFix" :src="imgUrl(`/images/company/map2.png`)"></u-image>
			</view>
			<view class="interval"></view>
			<view class="positioning-detailed padding-common">
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.bed_number)">
					<text class="positioning-detailed-left">房源编号:</text>
					<text class="positioning-detailed-right">{{contentMsg.bed_number}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.time)">
					<text class="positioning-detailed-left">更新时间:</text>
					<text class="positioning-detailed-right">{{contentMsg.time}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.utility_ratio)">
					<text class="positioning-detailed-left">实用率:</text>
					<text class="positioning-detailed-right">{{contentMsg.utility_ratio}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.office)">
					<text class="positioning-detailed-left">办公格局:</text>
					<text class="positioning-detailed-right">{{contentMsg.office}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.level_des)">
					<text class="positioning-detailed-left">楼&#8195;层:</text>
					<text class="positioning-detailed-right">{{contentMsg.level_des}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.towards_window)">
					<text class="positioning-detailed-left">窗面朝向:</text>
					<text class="positioning-detailed-right">{{contentMsg.towards_window}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.propertyFee)">
					<text class="positioning-detailed-left">物业费:</text>
					<text class="positioning-detailed-right">{{contentMsg.propertyFee}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.air_cost)">
					<text class="positioning-detailed-left">空调费:</text>
					<text class="positioning-detailed-right">{{contentMsg.air_cost}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.stall_money)">
					<text class="positioning-detailed-left">停车费:</text>
					<text class="positioning-detailed-right">{{contentMsg.stall_money}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.stall)">
					<text class="positioning-detailed-left">车位数:</text>
					<text class="positioning-detailed-right">{{contentMsg.stall}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.height)">
					<text class="positioning-detailed-left">层&#8195;高:</text>
					<text class="positioning-detailed-right">{{contentMsg.height}}</text>
				</view>
				<view class="positioning-detailed-part" v-if="checkField(contentMsg.layerNumber)">
					<text class="positioning-detailed-left">层&#8195;数:</text>
					<text class="positioning-detailed-right">{{contentMsg.layerNumber}}</text>
				</view>

				<view class="positioning-detailed-part" v-if="checkField(contentMsg.rent_holiday)">
					<text class="positioning-detailed-left">免租期:</text>
					<text class="positioning-detailed-right">{{contentMsg.rent_holiday}}</text>
				</view>

				<view class="positioning-detailed-part" v-if="checkField(contentMsg.shortest_lease)">
					<text class="positioning-detailed-left">最短租期:</text>
					<text class="positioning-detailed-right">{{contentMsg.shortest_lease}}</text>
				</view>
                 
				<view class="positioning-detailed-part" v-if="checkField(item.field) && checkField(item.content)" v-for="(item,index) in contentMsg.custom" :key="index">
				  	<text class="positioning-detailed-left">{{item.field}}:</text>
				  	<text class="positioning-detailed-right">{{item.content}}</text>
				  </view>
				 
				 

			</view>
			<view class="padding-common" style="width: 100%;">
				<view class="subscribe">
					<view class="u-image">
						<u-image mode="widthFix" width="150rpx" :src="imgUrl(`/images/company/subscribe3.png`)"></u-image>
					</view>
					<view class="subscribe-content">
						<text class="subscribe-content-title">
							预约看房
						</text>

						<text class="subscribe-content-font">
							{{contentMsg.spaceNum}}㎡ · {{contentMsg.building_title}}
						</text>
						<view class="subscrib-line">
							<view class="subscrib-line-input">
								<input placeholder="请输入手机号码" v-model="subscribePhone" type="number" />
							</view>
							<u-button :custom-style="{
								'width': '200rpx',
								'height': '100%',
								'display': 'flex',
								'justify-content': 'center',
								'align-items': 'center',
								'background': '#2cabff',
								'color': 'white',
							}" :loading="subscribeLoading" @click="subscribe">立即预约</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="interval"></view>
			
			<view class="pattern padding-common" v-if="contentMsg.pattern && contentMsg.pattern.length > 0">
				<view class="pattern-title">户型格局</view>
				<view v-for="(item,index) in contentMsg.pattern" :key="index">
					<u-image @click="imagesBig(imgUrl(item))" width="100%" mode="widthFix" :src="imgUrl(item)" style="margin-top: 20rpx;"></u-image>
				</view>
			</view>
			<view class="interval"></view>

			<view class="pattern padding-common">
				<view class="pattern-top">
					<view class="left">所属大厦</view>
					<navigator class="right" :url="`./Details?id=${buildingMsg.id}`">大厦详情<u-icon name="arrow-right"></u-icon>
					</navigator>
				</view>

				<view class="pattern-content" style="margin-bottom: 30rpx;">
					<u-image width="300rpx" mode="widthFix" :src="imgUrl(buildingMsg.cover_image)"></u-image>
					<view class="pattern-content-right">
						<view class="pattern-content-name">{{buildingMsg.title}}</view>
						<view class="pattern-content-part">
							<text class="left">大厦均价:</text>
							<text class="right" style="color:#DD524D;font-weight: 550;">{{Number(buildingMsg.avgPrice).toFixed(0)}} 元/㎡/月</text>
						</view>
						<view class="pattern-content-part" v-show="checkField(buildingMsg.completion_time)"><text class="left">竣工时间:</text>
							<text class="right">{{buildingMsg.completion_time}}</text>
						</view>
						<view class="pattern-content-part" v-show="checkField(buildingMsg.stall)"><text class="left">车位数量:</text>
							<text class="right">{{buildingMsg.stall}}</text></view>
						<view class="pattern-content-part" v-show="checkField(buildingMsg.property)">
							<text class="left">物业公司:</text>
							<text class="right">{{buildingMsg.property}}</text></view>
						<view class="pattern-content-part" >
							<text class="left">在租户型:</text>
							<text class="right">{{buildingMsg.InrentNum}}套</text>
						</view>
					</view>
				</view>
			</view>

			<view class="interval"></view>

			<view class="pattern padding-common" v-if="contentMsg.building_longitude">
				<view class="pattern-title" style="margin-bottom: 20rpx;">查看位置</view>

				<uMap :longitude="contentMsg.building_longitude" :latitude="contentMsg.building_latitude" :address="contentMsg.building_title"></uMap>
				<!-- <uMap :longitude="113.38002" :latitude="22.50525" :address="'1'"></uMap> -->
				<view class="recommended-bottom-button" @click="go()"> <text>开始出发</text> </view>
			</view>

			<view class="interval"></view>

			<view class="pattern padding-common" style="margin-bottom: 200rpx;">
				<view class="pattern-title" style="margin-bottom: 20rpx;">看了这个户型的人还看了</view>
				<view class="see-move">
					<navigator class="see-move-part" v-for="(item,index) in seeMove" :key="index" :url="`./BuildingsContent?id=${item.id}`">
						<SeeMore :sourceDataProps="mapping(item)"></SeeMore>
					</navigator>

				</view>

			</view>
			
			<foot  @collection="collection" :telPhoneNumber="contentMsg.hotline" :isCollectProps="contentMsg.hasOwnProperty('collection') && contentMsg.collection == 1 ?true:false" v-if="!loading" ></foot>

		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uMap from "@/components/map"
	import SeeMore from "@/components/see-move/SeeMove.vue"
	import foot from "@/components/foot/foot.vue"
	import {
		housingSelOne,
		belongsBuilding,
		housingWebListRand
	} from "@/services/housing.js"
	import Loading from "@/components/loading/loading.vue"
	import {
		mapMutations,
	} from "vuex";
	import {
		collectionOne
	} from "@/services/collectionHistory.js"
	import {
		subscribeAdd
	} from "@/services/subscribe.js"
	export default {
		components: {
			uMap,
			SeeMore,
			foot,
			Loading
		},
		data() {
			// const self_ = this
			return {
				id: '',
				see: 'VR',
				loading: true,
				swiperHeight: 0,
				subscribePhone:'',
				subscribeLoading:false,
				contentMsg: {},
				buildingMsg: {},
				seeMove: [],
				building_title: "",
				tagType:[ 'success' ,'primary'   ,'warning'  ,'error' ]
			}
		},
		onLoad(param) {
			
			this.id = param.id
			 // this.id = 84
            this.addHistoryMu({housing:this.id})
			
			this.housingSelOneLoad()
		},
		onReady() {
			// console.log(this.id)

		},
		mounted() {
			// console.log(uni.getSystemInfoSync())
			// url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
		},


		methods: {
			...mapMutations("user", ["addHistoryMu"]),
			changeSee(type) {
				if (!this.swiperHeight) {
					this.$nextTick(() => {
						let VrImage = uni.createSelectorQuery().in(this).select(".VR-u-image");
						VrImage.fields({
							size: true
						}, data => {
							this.swiperHeight = data.height
						}).exec();
					})
				}
				this.see = type

			},
			skip(){
				// :url="'./VrWeb?path='+contentMsg.vrUrl"
					// uni.navigateTo({
					// 	url:'./VrWeb?path=http://192.168.31.252/iframe.html'
					// })
				if(this.contentMsg.vrUrl){
					uni.navigateTo({
						url:'./VrWeb?path='+this.contentMsg.vrUrl
					})
				}else{
					this.$refs.uToast.show({
						title: '暂不支持VR',
						type: 'info',
					})
				}
				
			},
			async subscribe(){
				if (!(/^1[3456789]\d{9}$/.test(this.subscribePhone))) {
					 this.$refs.uToast.show({
					 	title: '请输入正确的电话号码',
					 	type: 'info',
					 })
				}else{
					this.subscribeLoading = true
				    let res =	 await subscribeAdd({formData:{
						phone:this.subscribePhone,
						target_id:this.id,
						table:'housing'
					}})
					this.subscribeLoading = false
					if(res.code == 200){
						
						this.$refs.uToast.show({
							title: '预约成功',
							type: 'success',
							duration:1500,
							callback:function(){
								uni.navigateTo({
									url:'../mine/MySubscribe'
								})
							}
						})
					}
				} 
			},
			async belongsBuildingLoad(){
				let res =   await belongsBuilding({id:this.contentMsg.building_id})
				if(res.code == 200){
					this.buildingMsg = res.data
					// console.log(typeof this.buildingMsg.avgPrice)
					// this.buildingMsg.avgPrice = this.buildingMsg.avgPrice.toFixed(2)
				}
			},
			async housingSelOneLoad() {
				this.loading = true
				let res = await housingSelOne({
					id: this.id
				})
				if (res.code == 200) {
					let contentMsg = res.data
					contentMsg.many_image = contentMsg.many_image?contentMsg.many_image.split(',').map(item => this.imgUrl(item)):[]
					contentMsg.tagList = contentMsg.tagList?contentMsg.tagList.split(','):[]
					contentMsg.pattern = contentMsg.pattern?contentMsg.pattern.split(','):[]
					contentMsg.time = (contentMsg.update_time ? contentMsg.update_time : contentMsg.create_time).split(' ')[0]
					contentMsg.custom = contentMsg.custom?JSON.parse(contentMsg.custom):[],
					contentMsg.building_longitude = parseFloat(contentMsg.building_longitude)
					contentMsg.building_latitude = parseFloat(contentMsg.building_latitude)
					this.contentMsg = contentMsg
					
				}
				this.belongsBuildingLoad()
				this.housingWebListRandLoad()
				uni.setNavigationBarTitle({
					title:`${this.contentMsg.building_title} · ${this.contentMsg.spaceNum}㎡ · ${this.contentMsg.level_des} `
				});
				this.$nextTick(() => {
					this.loading = false
				})
			},
			async   housingWebListRandLoad(){
				let res = await housingWebListRand({limit:4,id:this.id})
				if(res.code == 200){
					this.seeMove  =  res.data
				}
			},
			tagNum(index) {
				const {
					tagType
				} = this
				if (index + 1 <= tagType.length) {
					return index
				} else {
					let remainder = (index + 1) % tagType.length
					return remainder == 0 ? tagType.length - 1 : remainder - 1
				}
			},
			mapping(obj){
					return {
						title:`${obj.spaceNum}㎡ · ${obj.level_des} · ${obj.building_title}`,
						price: obj.meters_money,
						longitude:obj.building_longitude,
						latitude:obj.building_latitude,
						images: obj.cover_image,
					}
			},
			collection(e){
				 // console.log(e)
				 // console.log(1)
				 collectionOne({
					 collection:e,
					 table:'housing',
					 target_id:this.id
				 }) 
				 
			},
			swiperIndex(index) {
				this.imagesBig(this.contentMsg.many_image, index)
			},
			go() {
				const {
					contentMsg,
				} = this
				uni.openLocation({
					latitude: contentMsg.building_latitude, //纬度
					longitude: contentMsg.building_longitude, //经度
					name: `${contentMsg.building_title}`,
					address: `${contentMsg.building_address}`,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		background: white;
		position: relative;
		overflow-x: hidden;
		width: 100%;

		.content-top-all {
			width: 100%;
			position: relative;
			overflow-x: hidden;
			// border: 1rpx solid blue;

		}

		.content-top {
			width: 200%;
			display: flex;
			position: relative;
			// right: 0;
			transition: right 0.8s;

			.VR-image {
				width: 50%;
				// border: 1rpx solid red;
			}

		}

		.change-button {
			position: absolute;
			bottom: 50rpx;
			left: 50%;
			width: 220rpx;
			transform: translateX(calc(-50%));
			display: flex;

			height: 50rpx;
			border-radius: 70rpx;



			color: #c1c1c1;
			background-color: rgba(0, 0, 0, 0.5);

			.change-button-part {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 110rpx;
				// border: 1rpx solid red;
				font-size: 25rpx;

			}




			.change-button-part-sel {
				color: white;
				font-weight: bold;
				opacity: 1 !important;
				background: #07b5ff;
			}
		}

		.content-title {
			margin-top: 35rpx;
			font-size: 40rpx;

			.font {
				font-weight: 500;
			}

			.dot {
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}

		.content-tag {
			display: flex;
			flex-wrap: wrap;
			padding: 0 25rpx 0 25rpx;

			.sales-tag {
				margin-top: 15rpx;
				margin-left: 8rpx;
			}
		}

		.content-head {

			// margin-left: 10rpx;
			margin-top: 15rpx;
			font-size: 25rpx;
			color: #aaaaaa;
		}

		.padding-common {
			padding: 0 40rpx 0 40rpx;
		}

		.content-roughly {
			width: 100%;
			margin-top: 30rpx;
			// padding-bottom: 50rpx;
			// margin-left: 10rpx;

			// border-bottom:1rpx solid  #dedede;
			.content-roughly-content {
				display: flex;
				width: 100%;

				// border: 1rpx solid red;
				// border: 1rpx solid red;
				// height: ;
				.content-roughly-part {
					// flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 35rpx 0 35rpx;

					// justify-content: space-between;
					.left {
						color: #DD524D;
						font-size: 30rpx;
						font-weight: bold;
					}

					.right {
						margin-left: 5rpx;
						font-size: 25rpx;
						color: #b3b5ba;
					}
				}

				.content-roughly-part:nth-child(n+2) {
					border-left: 5rpx solid #f0f0f0;
				}

				.content-roughly-part:nth-child(3) {
					flex: 1;
				}

				.content-roughly-bottom {
					font-size: 25rpx;
					margin-top: 15rpx;
				}
			}

			.divider {
				margin-top: 50rpx;
			}
		}

		.positioning {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			// border: 1rpx solid red;
			margin-bottom: 15rpx;

			.positioning-left {
				display: flex;
				align-items: baseline;
				line-height: 40rpx;

				text {
					color: #666666;
					font-size: 27rpx;

				}
			}


			.positioning-left {
				display: flex;
			}
		}



		.positioning-detailed {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.positioning-detailed-part {
				width: 50%;
				display: flex;
				padding-left: 10rpx;
				margin-top: 30rpx;

				.positioning-detailed-left {
					white-space: nowrap;
					color: #6c6c6c;
				}

				.positioning-detailed-right {
					flex: 1;
					word-break: break-all;
					// display: flex;
					// flex-wrap: wrap;
					margin-left: 20rpx;
				}
			}
		}

		.subscribe {
			margin-top: 40rpx;
			border: 1rpx solid #f0f0f0;
			width: 100%;
			height: 300rpx;
			position: relative;
			margin-bottom: 50rpx;

			// display: flex;
			// justify-content: flex-end;
			.subscribe-content {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				flex-direction: column;
				padding: 50rpx 30rpx 0 30rpx;

				.subscribe-content-title {
					font-size: 32rpx;
				}

				.subscribe-content-font {
					font-size: 25rpx;
					margin-top: 10rpx;
					color: #686868;
				}

				.subscrib-line {
					width: 100%;
					// border: 1rpx solid red;
					display: flex;
					height: 80rpx;
					margin-top: 50rpx;

					.subscrib-line-input {
						flex: 1;
						height: 100%;
						background: #f7f7f7;
						padding-left: 20rpx;
						display: flex;
						align-items: center;
						color: #9e9e9e;
					}

					.subscrib-line-button {
						width: 200rpx;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						background: #2cabff;
						color: white;
					}
				}
			}
		}


		.pattern {
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			margin-bottom: 20rpx;

			.pattern-title {
				font-size: 30rpx;
				font-weight: 510;
			}

			.pattern-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 30rpx;
					font-weight: 510;
				}

				.right {
					font-size: 25rpx;
					color: #2cabff;
					display: flex;
					align-items: baseline;
				}
			}

			.pattern-content {
				width: 100%;
				margin-top: 30rpx;
				display: flex;

				.pattern-content-right {
					flex: 1;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;

					.pattern-content-name {
						font-weight: 510;
						font-size: 30rpx;
						margin-bottom: 10rpx;
						overflow: hidden;

						text-overflow: ellipsis;

						display: -webkit-box;

						-webkit-box-orient: vertical;

						-webkit-line-clamp: 1;
					}

					.pattern-content-part {
						margin-top: 15rpx;
						display: flex;
						align-items: baseline;

						.left {
							color: #b4b4b4;
							font-size: 28rpx;
							white-space: nowrap;
						}

						.right {
							margin-left: 15rpx;
							font-size: 28rpx;
							overflow: hidden;

							text-overflow: ellipsis;

							display: -webkit-box;

							-webkit-box-orient: vertical;

							-webkit-line-clamp: 1;
						}
					}
				}
			}

			.recommended-bottom-button {
				width: 100%;
				height: 80rpx;
				background-color: #ecf5ff;
				color: #2979ff;
				font-size: 30rpx;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;
				margin-bottom: 20rpx;
			}
		}

		.see-move {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.see-move-part {
				width: 48%;
				// border: 1rpx solid red;
				// height: 200rpx;
				margin-top: 20rpx;
			}

			// height: 200rpx;
		}

	}

	.u-image {
		// width: 100%;
		// border: 1rpx solid red;
		height: 100%;
		// padding-top: 30rpx;
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		// align-items: center;
	}
</style>
